<template>
  <el-card style="height: 100%;margin-bottom: 20px;">
    <!--热点文章的卡片头-->
    <div slot="header" class="clearfix">
      <span>热门消息 / HOT NEWS</span>
    </div>
    <!--热点文章的卡片头-->

    <!--热点文章的有序列表-->
    <ul class="hot">
      <li v-for="(item,index) in articles">
        <router-link :to="`/front/newDetail/${item.id}`" target="_blank">
            {{item.title}}
        </router-link>
      </li>


    </ul>
    <!--热点文章的有序列表-->

  </el-card>
</template>

<script>
import {findHostArticleList} from '@/api/article';
export default {
  name: "HotArticle",
  data() {
    return {
      articles:[]//热点文章集合

    };
  },
  mounted() {
    this.findHostArticleList()
  },
  methods: {

    //获取热点文章的方法
    findHostArticleList(){
      findHostArticleList().then(res=>{
        this.articles = res.data
      })

    }
  }
}
</script>

<style scoped>

</style>
